<template>
  <div>
    <task-board v-if="masterOrWorker" />
    <task-board-master v-if="!masterOrWorker" />

    <el-divider>
      <el-button type="text">
        <div class="role" @click="changeRole">
          <i style="font-size: 35px" :class="masterOrWorker?'el-icon-s-custom':'el-icon-s-finance'" /><span>{{ masterOrWorker?'我的任务':'我的发布' }}</span>
        </div>
      </el-button>
    </el-divider>
    <el-backtop />

    <el-table
      :data="allTaskData.task_data"
      :header-cell-style="{'text-align':'center'}"
      :cell-style="{'text-align':'center'}"
      style="width: 100%"
    >
      <el-table-column
        label="任务名称"
        width="400"
      >
        <template slot-scope="scope">
          <div class="master-header" style="padding: 10px">
            <el-tag style="margin: 5px; font-size: large">{{ scope.row.tasktitle }}</el-tag>
            <el-tag class="button" effect="plain">{{ scope.row.type_name }}</el-tag>
            <i class="el-icon-coin" style="color: #ffba00; font-size: large">{{ scope.row.bounty }}</i>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="截止日期"
        width="180"
      >
        <template slot-scope="scope">
          <i class="el-icon-timer" /><time class="time">{{ scope.row.enddate }}</time>
        </template>
      </el-table-column>
      <el-table-column
        :label="masterOrWorker?'发布者':'接收者'"
        width="260"
      >
        <template slot-scope="scope">
          <span :style="{color: scope.row.email == '未领取'?'#de8a18':'#3c763d'}">{{ scope.row.email }}</span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="!masterOrWorker"
        label="任务审核状态"
        width="120"
      >
        <template slot-scope="scope">
          <el-tag :type="scope.row.audit[0] == 0?'primary': scope.row.audit[0] == 1 ? 'success':'danger'">
            {{ scope.row.audit[0]==0?'待审核':scope.row.audit[0]==1?'审核通过':'审核不通过' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="任务状态"
        width="120"
      >
        <template slot-scope="scope">
          <el-tag :type="scope.row.task_res[0] == 0?'danger': scope.row.task_res[0] == 1 ? 'primary':'success'">
            {{ scope.row.task_res[0]==0?'未开始':scope.row.task_res[0]==1?'进行中':'已完成' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column v-if="masterOrWorker" label="上传凭证">
        <template slot-scope="scope">
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="3"
            :on-exceed="handleExceed"
            :file-list="fileList"
          >
            <el-button round plain size="small" type="primary" :disabled="scope.row.task_res[0]==0"><i class="el-icon-upload2" />点击上传</el-button>
            <!--          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
          </el-upload>
        </template>
      </el-table-column>
      <el-table-column v-if="!masterOrWorker" label="下载凭证">
        <template slot-scope="scope">
          <el-button round plain size="small" type="primary" :disabled="scope.row.task_evi == null"><i class="el-icon-download" />点击下载</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-popover
            :ref="`popover-${scope.$index}`"
            placement="top"
            trigger="click"
            width="120"
          >
            <div v-if="masterOrWorker"><p>确定将状态切换为<el-tag size="mini">进行中</el-tag>吗？此操作无法撤销哦~</p></div>
            <div v-if="!masterOrWorker"><p>确定将状态切换为<el-tag size="mini" type="success">已完成</el-tag>吗？此操作无法撤销哦~</p></div>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="cancelBtn(scope)">取消</el-button>
              <el-button v-if="masterOrWorker" type="primary" size="mini" @click="switchToOngoing(scope)">确定</el-button>
              <el-button v-if="!masterOrWorker" type="primary" size="mini" @click="switchToFinish(scope)">确定</el-button>
            </div>
            <el-button slot="reference" type="primary" icon="el-icon-refresh" />
          </el-popover>
          <el-button
            type="danger"
            icon="el-icon-delete"
            @click="handleDelete(scope.$index, scope.row)"
          />
        </template>
      </el-table-column>
    </el-table>

    <!--    发布任务悬浮按钮-->
    <div class="float_btn">
      <el-button circle plain size="larger" type="primary">
        <div class="role" @click="dialogFormVisible = true">
          <i style="font-size: 35px" class="el-icon-s-promotion" /><span>去发布</span>
        </div>
      </el-button>
    </div>

    <el-dialog title="发布新任务" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="任务名称" :label-width="formLabelWidth">
          <el-input v-model="form.tasktitle" autocomplete="off" />
        </el-form-item>
        <el-form-item label="任务类型" :label-width="formLabelWidth">
          <el-select v-model="form.typeid" placeholder="请选择活动区域">
            <el-option label="图片标注" value="1" />
            <el-option label="文本识别" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="任务描述" :label-width="formLabelWidth">
          <el-input v-model="form.taskintro" type="textarea" />
        </el-form-item>
        <el-form-item label="任务赏金" :label-width="formLabelWidth">
          <el-input-number v-model="form.bounty" :min="1" :max="100" />
        </el-form-item>
        <el-form-item label="截至日期" :label-width="formLabelWidth">
          <el-date-picker
            v-model="form.enddate"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitTask">发 布</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import TaskBoard from '@/views/tasks/component/TaskBoard'
import taskApi from '@/api/tasks'
import TaskBoardMaster from '@/views/tasks/component/TaskBoardMaster'
import { mapGetters } from 'vuex'
export default {
  name: 'MyTask',
  components: { TaskBoardMaster, TaskBoard },
  data() {
    return {
      allTaskData: {},
      // true是worker，false是master
      masterOrWorker: true,
      dialogFormVisible: false,
      form: {
        tasktitle: '',
        typeid: '',
        taskintro: '',
        enddate: '',
        bounty: 0
      },
      formLabelWidth: '120px',
      visible: false
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'avatar',
      'roles'
    ])
  },
  mounted() {
    this.getWorkerTasks()
  },
  methods: {
    getWorkerTasks() {
      const queryVo = {
        'email': '871201602@qq.com',
        'username': '202447454'
      }
      taskApi.getWorkerTaskTable(queryVo)
        .then(response => {
          this.allTaskData = response
        })
    },
    getMasterTasks() {
      const queryVo = {
        'email': '871201602@qq.com',
        'username': '202447454'
      }
      taskApi.getMasterTaskTable(queryVo)
        .then(response => {
          this.allTaskData = response
        })
    },
    changeRole() {
      this.masterOrWorker = !this.masterOrWorker
      if (this.masterOrWorker) {
        this.getWorkerTasks()
      } else {
        this.getMasterTasks()
      }
    },
    submitTask() {
      // {
      //   "tasktitle": "尿结晶图像标注",
      //   "taskintro": "dsfa",
      //   "typeid": "1",
      //   "bounty": 2,
      //   "enddate": "2022-05-25",
      //   "email": "871201602@qq.com",
      //   "username": "202447454",
      //   "isLogin": true
      // }
      this.form['email'] = '871201602@qq.com'
      this.form['username'] = '202447454'
      this.form['isLogin'] = true
      taskApi.publishTask(this.form)
        .then(response => {
          if (response.msg == 'success') {
            this.$message({
              message: '消息发布成功',
              type: 'success'
            })
            this.getMasterTasks()
            this.masterOrWorker = false
          }
        })
      this.dialogFormVisible = false
    },
    cancelBtn(scope) {
      scope._self.$refs[`popover-${scope.$index}`].doClose()
    },
    switchToOngoing(scope) {
      scope._self.$refs[`popover-${scope.$index}`].doClose()
      if (scope.row.task_res[0] == 1) {
        this.$message({
          message: '当前任务已经在开发中了，请耐心等待发布者的验收~',
          type: 'warning'
        })
        return
      }
      const queryVo = {
        'id': scope.row.key,
        'res': scope.row.task_res[0]
      }
      taskApi.switchTaskStatus(queryVo)
        .then(response => {
          if (response == '修改成功') {
            this.$message({
              message: '任务状态修改成功',
              type: 'success'
            })
            this.getWorkerTasks()
          } else {
            this.$message.error('任务状态修改失败，请检查网络或联系系统管理员')
          }
        }).catch(error => {
          this.$message.error('任务状态修改失败，请检查网络或联系系统管理员')
        })
    },
    switchToFinish(scope) {
      scope._self.$refs[`popover-${scope.$index}`].doClose()
      if (scope.row.task_res[0] == 2) {
        this.$message({
          message: '当前任务已完成，快去发布新的任务吧~',
          type: 'warning'
        })
        return
      } else if (scope.row.task_res[0] == 0) {
        this.$message({
          message: '接收者还未开始工作哦，请耐心等待工作者状态更新~',
          type: 'warning'
        })
        return
      }
      const queryVo = {
        'id': scope.row.key,
        'res': scope.row.task_res[0]
      }
      taskApi.switchMasterTaskStatus(queryVo)
        .then(response => {
          if (response == '修改成功') {
            this.$message({
              message: '任务状态修改成功',
              type: 'success'
            })
            this.getMasterTasks()
          } else {
            this.$message.error('任务状态修改失败，请检查网络或联系系统管理员')
          }
        }).catch(error => {
          this.$message.error('任务状态修改失败，请检查网络或联系系统管理员')
        })
    }
  }
}
</script>

<style scoped>
.master-header{
  display: flex;
  flex-direction: row;
  align-items: center;
}
.time {
  margin-left: 5px;
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  margin: 5px;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
.role {
  display: flex;
  flex-direction: column;
  margin: 5px;
  justify-content: center;
  align-items: center;
}

.float_btn {
  position: fixed;
  bottom: 30px;
  right: 30px;
}

</style>
